<!DOCTYPE html>
<html>
    <head>
        <style>
            #firstCell {
                border-right: 3px solid #e5ecf9;
                width: 12em;
                padding: 0.5em .5em .5em 0;
                font-size: 95%;
            }
            #content {
                position: relative;
            }
            #fixedTable {
                table-layout: fixed;
            }
            #firstFixedCell {
                width: 21.2px;
                margin: 0.3px;
                padding: 0.1px;
            }
        </style>
        <script src="../../resources/js-test.js"></script>
    </head>

    <body>
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
            <tbody class="collapse"> 
                <tr>
                    <td id="firstCell">
                        <div id="content">
                            <table cellspacing="0" cellpadding="0">
                                <tbody>
                                    <tr>
                                        <th align="left">Cc:</th>
                                        <td>TableLayoutAlgorithmAuto</td>
                                    </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
                <td width="100%"></td>
                </tr>
            </tbody>
        </table>
        
        <table id="fixedTable">
            <tr>
                <td id="firstFixedCell"><div id="fixedContent">foo</div></td>
                <td>TableLayoutAlgorithmFixed</td>
            </tr>
        </table>
        
        <p>
            Tests that setting the width of an element inside a cell to the computed width of said element does not change the width of the cell itself.
        </p>

        <script>
            var autoEl = document.getElementById("content");
            var autoCell = document.getElementById("firstCell");
            var autoExpectedWidth = String(autoCell.getBoundingClientRect().width);
            autoEl.style.width = autoEl.getBoundingClientRect().width + "px";
            if (autoCell.getBoundingClientRect().width == autoExpectedWidth)
                testPassed('Cell in AutoTable has expected size');
            else
                shouldBe('autoCell.getBoundingClientRect().width', autoExpectedWidth);
            
            
            var fixedEl = document.getElementById("fixedContent");
            var fixedCell = document.getElementById("firstFixedCell");
            var fixedExpectedWidth = String(fixedCell.getBoundingClientRect().width);
            fixedEl.style.width = fixedEl.getBoundingClientRect().width + "px";
            if (fixedCell.getBoundingClientRect().width == fixedExpectedWidth)
                testPassed('Cell in FixedTable has expected size');
            else
                shouldBe('fixedCell.getBoundingClientRect().width', fixedExpectedWidth);

        </script>
    </body>
</html>
